<template>
  <a-card size="small">
    <div slot="title">
      <a-button
        type="primary"
        @click="addCategory"
        v-permission="{action:'add', effect:'disabled'}"
        size="small"
      >
        <a-icon type="plus" />添加分类
      </a-button>
    </div>
    <a-table
      :columns="columns"
      :data-source="saveCategoryList"
      bordered
      v-if="saveCategoryList.length > 0"
      :defaultExpandAllRows="defaultExpandAllRows"
      :pagination="false"
      :expandRowByClick="expandRowByClick"
      :indentSize="50"
    >
      <span slot="action" slot-scope="userInfo">
        <a-button
          type="primary"
          @click="showUpdateModal(userInfo)"
          :disabled="!hasPerms('edit')"
          size="small"
        >修改</a-button>
        <a-divider type="vertical" />
        <a-popconfirm
          title="确定删除？"
          ok-text="是"
          cancel-text="否"
          @confirm="sureDelete(userInfo)"
          @cancel="cancelDelete"
        >
          <a-button
            v-permission="{action:'delete', effect:'disabled'}"
            size="small"
            type="primary"
          >删除</a-button>
        </a-popconfirm>
      </span>
    </a-table>
    <AddCategory
      ref="addCategoryModal"
      @refreshTable="refreshTable"
      :saveCategoryList="saveCategoryList"
    />
    <UpdateCategory
      ref="updateCategoryModal"
      @refreshupdate="refreshTable"
      :saveClickCategory="saveClickCategory"
    />
  </a-card>
</template>

<script>
import { hasPermission } from '@/utils/permission.js'
import AddCategory from './AddCategory'
import UpdateCategory from './UpdateCategory'
import {
  getALLCategory,
  deleteCategory
} from '@/network/categorys.js'
export default {
  name: 'categoryManager',
  data () {
    return {
      columns: [
        {
          title: '分类名称',
          dataIndex: 'name',
        },
        {
          title: '操作',
          align: 'center',
          width: '200px',
          scopedSlots: { customRender: 'action' },
        },
      ],
      saveCategoryList: [],   //用于保存所有分类
      saveClickCategory: {},  //用于保存当前点击的分类的信息
      pagination: false,   //控制表格自带的分页显示与否
      expandRowByClick: true,   //通过点击行来展开子行
      defaultExpandAllRows: true  //初始时展开所有行
    };
  },
  components: {
    AddCategory,
    UpdateCategory
  },
  computed: {

  },
  mounted () {
    this.getALLCategory(0)
  },
  methods: {
    //获取所有分类
    getALLCategory (parentIdz) {
      getALLCategory(parentIdz).then(res => {
        console.log(res)
        if (res.data.status === 200) {
          //得到一级分类后，递归遍历查看是否有二级分类或者三级分类，如果有，添加到对应父分类的children中
          if (res.data.data.length != 0) {  //当该级分类数组为空的时候，当前递归结束
            //不为空继续
            for (let item of res.data.data) {
              //第一次遍历，构造一个符合属性结构的数据
              const treeCategory = {
                parentId: item.parentId,
                _id: item._id,
                key: parentIdz + item._id,
                name: item.name,
                children: []
              }
              this.saveCategoryList.push(treeCategory)
            }
          }
          console.log(this.saveCategoryList)
          for (let item2 of this.saveCategoryList) {
            getALLCategory(item2._id).then(res => {
              if (res.data.data.length != 0) {
                for (let item3 of res.data.data) {
                  const treeCategory = {
                    parentId: item3.parentId,
                    _id: item3._id,
                    key: item2.key + item3._id,
                    name: item3.name,
                    children: []
                  }
                  item2.children.push(treeCategory)
                }
              }
            })
          }
          console.log(this.saveCategoryList)
        }
      })
    },
    //添加分类
    addCategory () {
      this.$refs.addCategoryModal.show()
    },
    //修改分类
    showUpdateModal (userInfo) {
      console.log(userInfo)
      this.saveClickCategory = userInfo
      this.$refs.updateCategoryModal.show()
    },
    //删除分类
    sureDelete (userInfo) {
      console.log(userInfo)
      const categoryId = userInfo._id
      deleteCategory(categoryId).then(res => {
        console.log(res)
        if (res.data.status === 400) {
          this.$message.error(res.data.msg)
        } else if (res.data.status === 200) {
          this.$message.success('删除成功')
          this.saveCategoryList = []
          this.getALLCategory(0)
        }
      })
    },
    //取消删除
    cancelDelete () {

    },
    //判断是否有权限
    hasPerms (perms) {
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms) //& !this.disabled
    },
    //更新完页面之后，关闭addRoleModal，刷新table
    refreshTable () {
      this.saveCategoryList = []
      this.getALLCategory(0)
    },
  },

};
</script>

<style scoped>
</style>
